<template>
  <li class="bbq-menu-sub">
    <div class="title">
      <div class="name">
        <slot name="title"></slot>
      </div>
      <div class="arrow" :class="{'reverse': !modelValue}" @click.stop="$emit('update:modelValue',!modelValue)">
        <!--  svgfont未引入之前，暂时用这个 -->
        👆
      </div>
    </div>
    <transition v-on="on">
      <ul class="sub-menu-list" v-show="modelValue">
        <slot name="menu-item"></slot>
      </ul>
    </transition>
  </li>
</template>

<script lang="ts">
import {defineComponent} from "vue"
export default defineComponent({
  name: "bbq-menu-sub",
  props: {
    modelValue: {
      type: Boolean,
      default: false
    }
  },
  emits:['update:modelValue'],
  setup(){
   const on = {
      beforeEnter(el: HTMLElement){
        //进入之前，
        el.style.height = '0'
      },
      enter(el: HTMLElement) {
        el.style.height = el.scrollHeight + 'px'
      },
      afterEnter(el: HTMLElement){
        el.style.height = ''
      },
      beforeLeave(el: HTMLElement){
        el.style.height = el.scrollHeight + 'px'
      },
      leave(el: HTMLElement){
        //神奇的if 没有经过if进行一次计算的话，style的设置会重在一起导致动画失效，所以通过if计算错开顺序
        if (el.scrollHeight !== 0) {
          //在vue3中会出现 transitionProperty ： none的样式，需要手动设置一下
          el.style.transitionProperty = 'height'
          el.style.height = '0'
        }
      },
      afterLeave(el: HTMLElement){
        el.style.height = ''
      }
    }
   return {
     on
   }
  }
})
</script>